<!-- About section -->

<div class="row mb-4">
    <div class="col-lg-2 col-md-4">
        <div class="ring-container">
            <div class="ring">
                <div class="hollow-ring">
                    <img class="profile-image" src="{{ site.data.about.profile-pic }}" alt="{{ site.data.about.name }}">
                    {% if site.data.about.emoji %} 
                        <div class="emoji-indicator">
                            {{ site.data.about.emoji }} 
                            <span class="hover-text"> {{ site.data.about.desc-emoji }} </span> 
                        </div> 
                    {% endif %}
                </div>
            </div>
        </div>
        <hr>
        <div class="social-icons">	
            {% if site.data.about.scholar %} <a class="social-icon" href="{{ site.data.about.scholar }}" target="_blank" rel="noopener" title="Google Scholar"><i class="fa fa-graduation-cap" style="font-size: 35px; color: #4285f4"></i></a> {% endif %}
            {% if site.data.about.ORCID %} <a class="social-icon" href="{{ site.data.about.ORCID }}" target="_blank" rel="noopener" title="ORCID"><i class="fab fa-orcid" style="font-size: 35px; color: #9ece7a"></i></a> {% endif %}
            {% if site.data.about.researchgate %} <a class="social-icon" href="{{ site.data.about.researchgate }}" target="_blank" rel="noopener" title="ResearchGate"><i class="fab fa-researchgate" style="font-size: 35px; color: #00D0BB"></i></a> {% endif %}
        </div>
        <div class="social-icons">
            {% if site.data.about.github %} <a class="social-icon" href="{{ site.data.about.github }}" target="_blank" rel="noopener" title="GitHub"><i class="fab fa-github" style="font-size: 35px; color: #171515"></i></a> {% endif %}
            <!-- {% if site.data.about.youtube %} <a class="social-icon" href="{{ site.data.about.youtube }}" target="_blank" rel="noopener" title="YouTube"><i class="fab fa-youtube" style="font-size: 35px; color: #FF0000"></i></a> {% endif %} -->
            {% if site.data.about.resume %} <a class="social-icon" href="{{ site.data.about.resume }}" target="_blank" rel="noopener" title="Resume"><i class="fas fa-file-alt" style="font-size: 35px; color: #bd5d38"></i></a> {% endif %}
        </div>
        <p></p>
    </div>

    <div class="col-lg-10 col-md-8">
        <h2>{{ site.data.about.name }} {% if site.data.about.pronunciation %}<span class="text-primary">{{ site.data.about.pronunciation }}</span>{% endif %}</h2>
        <p></p>
        {{ site.data.about.first-paragraph }}
        <p></p>
        {{ site.data.about.second-paragraph }}      
        <p></p>
        {{ site.data.about.third-paragraph }}      
        <p></p>
        <code>>> {{ site.data.about.research-interest }}</code>
        <!-- <p></p> -->
    </div>
</div>
